<script lang="ts" setup>
</script>
<template>
    <div class="abtAuthor">
        <div class="intro">
            <!-- <img src="../../public/static/orl.jpg" /> -->
            <img src="https://lsj-boot.oss-cn-chengdu.aliyuncs.com/images/e5d3afa547a044da8101e536db09e1bf.gif">
            <br/>
            <div class="jump">
                    <a href="https://www.bilibili.com" target="_blank">B站主页</a>
                    <a href="https://www.baidu.com" target="_blank">前往百度</a>
                </div>
                <h3>自我介绍</h3>
            <div class="abtMe">
                <p id="mySelf">这里就是自我介绍了，暂时没想到什么好写的，首先！我是一个学生，平时喜欢玩玩游戏，对编程一类感兴趣，想学的乐器是小提琴，爱好和平。</p>
            </div>
        </div>
    </div>
</template>
<style scoped>
#mySelf{
    text-align: center;
    text-indent: 2em;
    word-wrap: break-word;
    font-size: 18px;
}
.abtMe{
    
    border-radius: 10px 10px 10px 10px;
    margin-left: 20px;
    width: 140px;
    height: auto;
    background-color: aliceblue;
    padding: 10px;    
}
.jump{
    margin-top: 20px;
}
.jump a{
    margin-right: 20px;
    font-size: 18px;
    /* color: rgb(228, 118, 0); */

}

.intro{
    padding-top: 20px;
    width: 200px;
    height: 680px;
}
.intro img{

    width: 150px;
    height: 150px;
    border-radius: 100%;
}
.abtAuthor{
    /* float: left; */
    width: 200px;
    height: 680px;
    background-color: rgb(177, 221, 246);
    border-radius: 0 15px 15px 0 ;
}
@media (prefers-color-scheme: dark) {
    .jump a {
        color: rgb(146, 224, 234);
    }
    .abtAuthor{
    /* float: left; */
    background-color: rgb(39, 95, 128);
    }
    .abtMe{
        background-color: rgba(32, 157, 157, 0.788);
        color: rgb(3, 32, 56);
    }
    
}
</style>